<template>
	<view class="container">
		<view class="week">
			<span v-for="(item,index) in week" :key='item'>{{item}}</span>
		</view>
		<view class="date">
		<span v-for="(item,index) in arr" :key="index">{{ item }}</span>
		</view>
	</view>
</template>

<script>
	// const weeknumber = new Map([['一',0],['二',0],['三',0],['一',0],['一',0],['一',0],['一',0]])
	export default {
		name:"Calendar",
		data() {
			return {
				week:['日','一','二','三','四','五','六'],
				date:new Date()
			};
		},
		props:['yearMonth'],
		computed:{
			arr(){
				return this.getArr(new Date(this.yearMonth))
			}
		},
		mounted(){
			// console.log("日历组件");
			// 获取当前月初是周几
		},
		methods:{
			// 获取月初是周几
			getmonth1week(date){
				let day = date || new Date()
				let day2 = new Date(day.getFullYear(),day.getMonth())
				return day2.getDay()
			},
			//获取一个月多少天
			getMonthDays(p){
				let date = p || new Date()
				// 使用 new Date() 创建时间对象时，如果 date 传入 0，就能直接通过 getDate() 获取到最后一天的日期
				date = new Date(date.getFullYear(),date.getMonth(),0)
				return date.getDate()
			},
			// 生成要渲染的数组
			getArr(date){
				const num1 = this.getmonth1week(date)
				// 获取当前月有多少天
				const num2 = this.getMonthDays(date)
				//生成一个数组
				let arr1 = []
				for (var i = 0; i < num1; i++) {
					arr1.push(' ')
				}
				for (var i = 0; i < num2; i++) {
					arr1.push(i+1)
				}
				return arr1
			},
			
			// 
		}
	}
</script>

<style lang="scss">
.container{
	background-color: #a8dba8;
	height: 100%;
	.week{
		width: 100%;
		height: 10%;
		background-color:  rgba(207,240,158,1);
		display: flex;
		justify-content: space-around;
		color: #3b8686;
	}
	.date{
		width: 100;
		height: 90%;
		// background-color: #3b8686;
		display: flex;
		flex-wrap: wrap;
		align-items: space-around ;
		span{
			width: 14.27%;
			// height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		span.active{
			color: red;
		}
	}
}
</style>
